<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现Ajax的步骤</title>
    <script src="js/createXMLHttpRequest对象.js"></script>
    <script>
        var btn = document.getElementById('btn')
        btn.addEventListener('click',function(){
            // 实现Ajax的异步交互

            // 1.创建XMLHttpRequest对象
            var xhr = createXMLHttpRequest();
            // 2.调用XMLHttpRequest对象的open()方法
            // 作用：与服务器建立连接
            xhr.open('get',"https://developer.mozilla.org/")
            // 3.调用XMLHttpRequest对象的send()方法
            xhr.send(null)
            // 作用：将客户端页面的数据发送给服务端
            // 4.利用XMLHttpRequest对象的onreadystatechange事件
            // 作用：用于监听服务端的通信状态
            xhr.onreadystatechange = function(){//监听服务器的通信状态
                if(xhr.readyState === 4){
                    console.log(xhr.responseText)
                }
            }
            // 接收服务器返回的处理结果(服务器端的通信状态中 —— 存在着处理完毕（信号）)
        })
    </script>
</head>
<body>
    <button id="btn">按钮</button>
</body>
</html>